<template>
  <FixedDialogLayout :id="sid">
    <div class="WarnListPanel">
      <div class="WarnListPanel--close" @click="closeAction"></div>
      <div class="WarnListPanel--content">
        <div class="WarnListPanel--content__info">
          <div class="tabs">
            <el-scrollbar wrap-style="" view-style="max-height: 60px;" :always="false">
              <div class="tabs--list">
                <div class="tabs--list__item"
                     :class="{active: warninfo === warn}"
                     @click="changeTabAction(warn)"
                     v-for="(warn,index) in warninfolist" :key="warn.title + index">
                  <span>{{warn.title}}</span>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div class="info">
            <div class="info--item">
              <div class="info--item__label">撤防时间：</div>
              <div class="info--item__value">{{ warninfo.cancelTime }}</div>
            </div>
            <div class="info--item">
              <div class="info--item__label">布防时间：</div>
              <div class="info--item__value">
                {{ warninfo.controlTime }}
              </div>
            </div>
          </div>
        </div>
        <el-scrollbar height="370px" view-style="height: 370px;"
                      :always="false">
          <div class="personPanelList" v-if="warninfo && warninfo.list &&  warninfo.list.length > 0">
            <!--<div class="personPanel" v-for="(item, index) in warninfo.list" :key="index"-->
            <!--     @click="showCameraDetail(item)">-->
            <div class="personPanel" v-for="(item, index) in warninfo.list" :key="index">
              <div class="personPanel--img">
                <!--<img src="@/assets/images/armyScreen/sample3.png"/>-->
                <img :src="item.snapUrl"/>
              </div>
              <div class="personPanel--info">
                <div class="personPanel--info__item person"><i></i>识别种类：{{ item.type || '--' }}</div>
                <div class="personPanel--info__item name"><i></i>抓拍时间：{{ item.time || '--' }}</div>
                <div class="personPanel--info__item date"><i></i>姓名：{{ item.name || '--' }}</div>
              </div>
            </div>
          </div>
          <NoDataEmpty tipsStyle="color:#fff;" v-else/>
        </el-scrollbar>
      </div>
    </div>
  </FixedDialogLayout>
</template>

<script setup>
import FixedDialogLayout from "@/components/common/FixedDialogLayout.vue";
import NoDataEmpty from '@/components/common/NoDataEmpty.vue'
import NoPlayerImg from '@/assets/images/armyScreen/暂无视频@2x.png'

const sid = Math.floor(Math.random() * 1000000000000000)
const activeCamera = ref({})

const props = defineProps({
  warninfolist: {
    type: Object,
    default: () => {
      return [
        // {
        //   "title": "今日出入记录1",
        //   "cancelTime": "2023-10-31 15:53:47",
        //   "controlTime": "2023-03-29 19:51:39",
        //   "list": [
        //     {
        //       "snapUrl": "https://10.192.195.225/csjzzav/images/changsha_bg.png",
        //       "type": "陌生人识别",
        //       "name": "",
        //       "time": "2023-10-31 15:53:47",
        //       "address": null
        //     },
        //     {
        //       "snapUrl": "https://10.192.195.225/csjzzav/images/changsha_bg.png",
        //       "type": "重点人识别",
        //       "name": "李四",
        //       "time": "2023-10-31 15:53:47",
        //       "address": null
        //     }
        //   ]
        // }
      ]
    }
  }
})


const warninfo = ref([])
onMounted(() => {
  // props = defineProps({
  //   warninfolist: {
  if (props.warninfolist.length) {
    warninfo.value = props.warninfolist[0]
  }
  // warninfo.value = {}
})


const $emit = defineEmits(['close'])

function closeAction() {
  $emit('close')
}

function changeTabAction(warn) {
  warninfo.value = warn
}

function showCameraDetail(info) {
  // debugger
  $emit('camera', info)
}

</script>

<style lang="scss" scoped>
.WarnListPanel {
  width: 531px;
  height: 544px;
  padding: 29px 37px 28px 56px;
  margin: 0 auto;
  position: relative;
  background-image: url("@/assets/images/armyScreen/new/2.png");
  background-size: contain;

  &--close {
    background-image: url("@/assets/images/armyScreen/playerListClose.png");
    background-size: cover;
    width: 36px;
    height: 36px;
    position: absolute;
    top: -46px;
    right: 0;
    cursor: pointer;
  }

  &--content {
    height: 444px;
    padding-top: 12px;
    &__info {
      .tabs {
        &--list {
          display: flex;
          flex-wrap: wrap;
          &__item {
            height: 24px;
            line-height: 24px;
            background-image: linear-gradient(270deg, rgba(0, 97, 165, 0.58) 0%, rgba(0, 89, 164, 0.3) 100%);
            border-radius: 2px;
            text-align: center;
            padding: 0 4px;
            margin-right: 16px;
            cursor: pointer;
            margin-bottom: 12px;

            span {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: rgba(167, 222, 255, 0.7);
              text-align: center;
              font-weight: 400;
            }

            &:nth-child(1) {

            }

            &.active {
              background-image: linear-gradient(270deg, rgba(0, 97, 165, 0.58) 0%, rgba(0, 89, 164, 0.8) 100%);
              border-radius: 2px;

              span {
                color: #C9EBFF;
              }
            }
          }
        }
      }


      .info {
        display: flex;
        margin-top: 12px;
        margin-bottom: 12px;

        &--item {
          width: 50%;
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #C9EBFF;
          line-height: 14px;
          font-weight: 600;
          display: flex;

          &__label {
          }

          &__value {
          }
        }
      }
    }

    .personPanelList {
      width: 100%;
      //animation: move 17s linear infinite normal;
      //display: flex;
      cursor: pointer;

      &:hover {
        animation-play-state: paused;
      }
    }

    .personPanel {
      width: 412px;
      height: 94px;
      background: rgba(21, 77, 160, 0.20);
      display: flex;
      padding: 8px;
      margin-bottom: 8px;

      &--img {
        width: 78px;
        min-width: 78px;
        height: 78px;
        margin-right: 12px;

        img {
          width: 100%;
          max-height: 90px;
        }
      }

      &--info {
        flex: 1;
        line-height: 24px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #D8F0FF;
        letter-spacing: 0;
        font-weight: 400;

        &__item {
          width: 300px;

          i {
            display: inline-block;
            content: '';
            width: 16px;
            height: 16px;
            margin-right: 2px;
            position: relative;
            top: 2px;
            background-size: cover;
          }

          &.date {
            i {
              background-image: url("@/assets/images/armyScreen/门禁记录_时间@2x.png");
            }
          }

          &.person {
            i {
              background-image: url("@/assets/images/armyScreen/门禁记录_姓名@2x.png");
            }
          }

          &.name {
            i {
              background-image: url("@/assets/images/armyScreen/门禁记录_地址@2x.png");
            }
          }
        }

        &__addr {
          width: 300px;

          &::before {
            display: inline-block;
            content: '';
            width: 16px;
            height: 16px;
            margin-right: 2px;
            position: relative;
            top: 2px;
            background-image: url("@/assets/images/armyScreen/门禁记录_地址@2x.png");
            background-size: cover;
          }
        }
      }
    }

    @keyframes move {
      0% {
        transform: translateY(0);
      }
      100% {
        // 489px 是根据可视区域的高度定的
        transform: translateY(calc(-100% + 243px));
      }
    }
  }
}
</style>
